import React, { useState, useEffect } from 'react';
import './Works.scss'
import DynamicBackground from './DynamicBackground/DynamicBackground';
import { ArrowLeft, Close } from '@nutui/icons-react'
import { AlertFilled, MergeFilled, SendOutlined } from '@ant-design/icons'
import img from './Picture/2.jpg'


const Works = () => {

    const [showComments, setShowComments] = useState(false);

    const handleShowComments = () => {
        setShowComments(true);
    };

    const handleCloseComments = () => {
        setShowComments(false);
    };

    const [comments, setComments] = useState([
        {
            author: 'X',
            content: 'ZJHL少女系列已上新，拥有第一版网瘾少女可成为SSS级会员，仅剩11个名额。',
            timestamp: '19分钟前'
        },
        {
            author: 'X',
            content: 'ZJHL少女系列已上新，拥有第一版网瘾少女可成为SSS级会员，仅剩11个名额。',
            timestamp: '19分钟前'
        },
        {
            author: 'X',
            content: 'ZJHL少女系列已上新，拥有第一版网瘾少女可成为SSS级会员，仅剩11个名额。',
            timestamp: '19分钟前'
        },
        {
            author: 'X',
            content: 'ZJHL少女系列已上新，拥有第一版网瘾少女可成为SSS级会员，仅剩11个名额。',
            timestamp: '19分钟前'
        },
        {
            author: 'X',
            content: 'ZJHL少女系列已上新，拥有第一版网瘾少女可成为SSS级会员，仅剩11个名额。',
            timestamp: '19分钟前'
        },
    ]);

    const [newComment, setNewComment] = useState('');

    const handleCommentChange = (event) => {
        setNewComment(event.target.value);
    };

    const handleCommentSubmit = () => {
        if (newComment.trim()) {
            setComments([
                ...comments,
                {
                    author: 'New User',
                    content: newComment,
                    timestamp: '刚刚'
                }
            ]);
            setNewComment('');
        }
    };
    return (
        <div>
            <div className="menu">
                <div className="menu-1">
                    <ArrowLeft />
                </div>
                <div className="menu-2">
                    <AlertFilled />
                </div>
                <div className="menu-3">
                    <MergeFilled />
                </div>
            </div>
            <div className="pic">
                <div className="pic-1">
                    <DynamicBackground imageUrl={img} />
                </div>
                <div className="pic-2">
                    <img src={img} />
                </div>
            </div>
            <div className="detail">
                <div className="detail-1">
                    <h4>Jay Chou</h4>
                    <h3>November's Chopin</h3>
                    <h5>以钢琴诗人之名</h5>
                    <h5>+更多</h5>
                </div>
                <div className="detail-2">
                    <div className="detail-2-1">
                        <h4>865163</h4>
                        <h5>点赞数</h5>
                    </div>
                    <div
                        className="detail-2-1"
                        onClick={handleShowComments}
                    >
                        <h4>6357</h4>
                        <h5>评论数</h5>
                    </div>
                </div>
                <div className="detail-3">
                    <div className="detail-3-1">
                        <h5>价格</h5>
                        <h5 style={{ color: 'red' }}>￥198.00</h5>
                    </div>
                    <div className="detail-3-1">
                        <h5>版号数量</h5>
                        <h5 style={{ color: '#292929' }}>100/100</h5>
                    </div>
                    <div className="detail-3-1">
                        <h5>铸造时间</h5>
                        <h5 style={{ color: '#292929' }}>2022.12.24 18:00:23</h5>
                    </div>
                </div>
            </div>
            <div className="comment">
                <div className={`comment-1 ${showComments ? 'comment-2' : ''}`}>
                    <div className="comment-3">
                        <div className="comment-3-1">
                            <h3>共有6357条评论</h3>
                            <Close onClick={handleCloseComments} style={{ marginTop: '6%', fontSize: '100px' }}></Close>
                        </div>
                        <div className="comment-3-2">
                            <div className="comments-container">
                                <div className="comment-list">
                                    {comments.map((comment, index) => (
                                        <div key={index} className="comment">
                                            <div className="comment-T">
                                                <img src={img}></img>
                                            </div>
                                            <div className="comment-Z">
                                                <div className="comment-text">{comment.content}</div>
                                                <div className="comment-time">{comment.timestamp}</div>
                                            </div>

                                        </div>
                                    ))}
                                </div>
                                <div className="sticky-input-container">
                                    <input
                                        type="text"
                                        className="comment-input"
                                        value={newComment}
                                        onChange={handleCommentChange}
                                        placeholder="请输入您的评论"
                                    />
                                    <button className="comment-submit" onClick={handleCommentSubmit}>
                                        <SendOutlined />
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Works;